*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
header{

}
 header .navbar-default .navbar-nav > li > a{
    color: white;
    /* background-color: rgb(70, 109, 226,0.5); */
}
.navbar-default .navbar-nav > li > a:hover{
    color: yellowgreen;
    /* background-color:white; */


}
.m_searchh{
    position: relative;
}
.m_searchh:hover .m_box_search{
        display: block;
}
.m_box_search{
    /* border: 1px solid red; */
   display: none;
    position: absolute;
    top: 10px;
    right: 40px;
}
.m_box_search input{
    height: 30px;
    width: 200px;
    border: none;
    color: black;
    /* background-color: rgb(122, 173, 224,0.5); */
    border-radius: 10px;
}
.navbar{
    margin-bottom: 0;
    border-radius: 0;
    background-color:rgba(45, 112, 146, 0.3) ;
}
.m_bg{
    color: rgb(233, 224, 224);
    border: none;
    /* border: 1px solid #000; */
  
}

.navbar-brand{
    width: 160px;
    display: block;
    position: relative;
    /* background-color: green; */
}
.navbar-brand h3{
    /* display: inline-block; */
    position: absolute;
    top: -4px;
    right: 0;
    font-size: 16px;
    color: white;
}
.m_row {
    margin-top: 25px;
    margin-bottom: 10px;
}
.m_row h3{
    font-size: 16px;
    color: rgb(145, 145, 145,0.5);
}
.m_code:hover .m_qcode{
     /* visibility: visible; */
     display: block;
}
.m_logo{
    width: 150px;
    height: 80px;
    margin-top: -30px;
    margin-left: -10px;
    transform:  translateX(0px);
    transition: all 0.5s;

    /* border: 1px solid #000; */
}
.m_qcode{
    position: absolute;
    top: 50px;
    right: 10px;
    /* visibility: hidden; */
    display: none;
    width: 160px;
    height: 160px;
    background-color: white;
}
.m_qcode img{
    width: 60%;
    height: 60%;
    /* text-align: center; */
    margin-left: 30px;

}
.m_qcode p{
    /* border: 1px solid #000; */
    padding-top: 5px;
    color: black;
    text-align: center;
    font-size: 15px;
}
.navbar-nav .m_code{
    position: relative;
}
.m_logo:hover{
    transform:translateX(-120px);
}

.navbar-right li{
  
    margin-right: 10px;
    margin-left: 20px;
}
.m_banner{
    color: white;
    position: relative;
    padding-left: 0;
    text-align: center;
    /* height: 650px; */
    /* border: 1px solid #000; */
   
    background-position:center 600px;
    background-image:  url("../images/bg_jb.png"), url("../images/banner.jpg");
   
    /* opacity: 0.7; */
}
.m_gradients{
    width: 100%;
    /* height: 800px; */
    /* border: 1px solid red; */

}
.m_banner_text{
    animation: move2 1.5s linear ;
}
@keyframes move2{
    0%{
        opacity: 0;
        transform: translateY(100px);
    
    }
    100%{
        opacity: 1;

    transform: translateY(0px);

    }
}
.m_banner .m_banner_text{
    color: white;
    text-align: center;
    margin-top: auto ;
    margin-bottom: auto ;

    margin-top: 15%;
}
.m_banner .m_banner_text h3{
    font-size: 35px;
    
}
.m_banner .m_banner_text p{
    font-size: 25px;

}
.m_banner>h2{
    font-size: 20px;
    
    margin-top: 60px;
}
.m_banner>p{
    margin-top: 30px;
    padding-bottom: 140px;
    margin-bottom: 20px;
}
.m_banner>p>span:hover{
    color: yellowgreen;
    /* background-color: red; */
}
.m_banner>p font{
    color: yellowgreen;
}
.m_banner span{
    margin: 0 10px;
}
.m_list{
    /* margin-top: 200px; */

/* border: 1px solid red; */

}
.m_position{
    position: absolute;
    bottom: -100px;
    overflow: hidden;
    /* border: 1px solid #000; */
}
.m_tuijian{
/* border: 1px solid red; */

}
.m_tuijian li {
    position: relative;

    overflow: hidden;
    padding: 0;
    /* border: 1px solid #000; */
    /* position: relative; */
}
.m_tuijian li .m_tj_mask ,.m_tj_mask2,.m_tj_mask3,.m_tj_mask4{
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: calc(50% - 100px);
    width: 200px;
    height:42px;
    background-color: rgb(145, 145, 145,0.5);
    transform: translateY(20px);
    transition: all 0.5s;
}
.m_play{
    transition: all 0.2s;
    visibility: hidden;
    transform: scale(0.8);
    opacity: 0;
    position: absolute;
    top: calc(50% - 20px);
    right: calc(50% - 20px);
    font-size: 40px;
}
.m_1:hover .m_play  ,.m_2:hover .m_play,.m_3:hover .m_play,.m_4:hover .m_play{
    visibility: visible;
    transform: scale(1);
    opacity: 1;


}
.m_1:hover .m_tj_mask  ,.m_2:hover .m_tj_mask2,.m_3:hover .m_tj_mask3,.m_4:hover .m_tj_mask4{
    visibility: visible;
    transform: translateY(0px);

}

.m_tj_mask span ,.m_tj_mask2 span,.m_tj_mask3 span,.m_tj_mask4 span{
    display: block;
    margin-top: 5px;
    color: white;
    text-align: left;
    font-size: 16px;
    /* background-color: gold; */
}
.m_tj_mask p,.m_tj_mask2 p,.m_tj_mask3 p,.m_tj_mask4 p{
    
    /* bottom: 0; */
    /* bottom: 0; */
    text-align: left;

    font-size: 12px;
    color: #cfcfcf;
    /* background-color: gray; */
}
/* .m_tj_mask{
    position: absolute;
} */
.m_tuijian li img{
    width: 200px;
    height:200px;
    margin: 0 auto;
   
}
.container{
    padding: 0;
}
.m_dj{
    /* border: 1px solid red; */
    /* height: 200px; */
    padding-top: 100px;
}
.m_dj .row li img{
    width: 100px;
    height: 100px;
    /* float: left; */
} 
.m_dj .row li{
    position: relative;
    /* border: 1px solid #000; */
    margin-top: 30px;
}
.m_dj .row li span{
    display: block;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* border: 1px solid red; */
 
}
.m_dj .row li .box{
    /* border: 1px solid #000; */
    float: left;
    margin-left: 10px;
    margin-top: 30px;
}
.m_dj .row li p{
       color: #ada9a9;
}
.m_dj .row li font{
    position: absolute;
    top: 80px;
    right: 16px;
       color: #ada9a9;
}
.m_dj_img{
    /* border: 1px solid #000; */
    width: 100px;
    height: 100px;
    float: left;
    position: relative;
}
.m_dj_img:hover .m_dj_mask{
    visibility: visible;
}
/* .m_sm_mask{
    width: 90px;
    height: 90px;

    border: 1px solid red;
} */
.m_dj_mask{
    visibility: hidden;
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgb(216, 216, 216,0.2);
}
.m_dj_mask i{
    color: gray;
    margin: 40px 40px;
    font-size: 26px;
}
.m_dj_img2{
    width: 260px;
    height: 130px;
    margin: 20px auto ;
    /* float: left; */
    position: relative;
}
.m_dj_img2:hover .m_dj_mask2{
    visibility: visible;
}
.m_dj_mask2{
    visibility: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(216, 216, 216,0.5);
}
.m_dj_mask2 i{
    color: gray;
    margin: 50px 120px;
    font-size: 26px;
}
.m_mx {
    overflow: hidden;
    position: relative;
    /* border: 1px solid #000; */
}
.m_silder{
      
       width: 400%;
        height: 242px;
         /* border: 1px solid #000; */
}
.m_mx img{
    /* margin-left: 110px; */

    width: 242px;
    height: 242px;
}
.m_mx .m_i_left{
    position: absolute;
    top: 35%;
    left: 0;
    font-size: 100px;
    color:#dedede;
    transform: translateX(-30px);
    transition: all 1s;
    /* visibility: hidden; */
    opacity: 0;

}
.m_mx:hover .m_i_left{
    transform: translateX(0px);
    /* visibility: visible; */
    opacity: 1;
    
}
.m_mx:hover .m_i_right{
    transform: translateX(0px);
    visibility: visible;
    opacity: 1;
    
}
.m_margin{
    margin: 0;
}
.m_mx .m_i_right{
    position: absolute;
    top: 35%;
    right: 0;
    transition: all 1s;
    visibility: hidden;
    color:#dedede;
    font-size: 100px;
    transform: translateX(30px);
    opacity: 0;

}

.m_mx .move{
    display: inline-block;
    margin-left: 110px;
    width: 242px;
    height: 242px;
    /* border: 1px solid #000; */
}
.m_mx li{
    /* border: 1px solid red; */
    /* float: left; */
}
.m_mv{

    /* border: 1px solid #000; */
}
.m_mv_img{
    margin: 0;
    /* border: 1px solid red; */
}
.m_mv_img li img{
    width: 260px;
    height: 130px; 
}
.m_mv_img li font{
    color: #ada9a9;

}
.m_mv_img li{
    /* border: 1px solid #000; */
}
.m_mv_img li p{
    margin: 0 auto;
    /* text-align: center; */
    /* margin-top: 20px; */
    /* border: 1px solid red; */
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
}
.m_silder{
    animation: moves 15s linear 1s infinite;
}
.m_silder:hover{
    animation-play-state:paused;
}
@keyframes moves{
    0%{
        transform: translateX(0px);
    }
    20%{
        transform: translateX(-1070px);

    }
    40%{
        transform: translateX(-1070px);

    }
    60%{
        transform: translateX(-2140px);

    }
    80%{
        transform: translateX(-2140px);

    }
    100%{
        transform: translateX(-3210px);

    }
   
}
.m_m1,.m_m2,.m_m3,.m_m4,.m_m5,.m_m6{
    overflow: hidden;
    position: relative;
}
/* .m_rotae:hover .m_gs_img{
    transform: scale(1.2);
} */
.m_move_mask,.m_move_mask2,.m_move_mask3,.m_move_mask4,.m_move_mask5,.m_move_mask6
{   visibility: hidden;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 242px;
    height:60px;
    transform: translateY(20px);
    transition: all 0.5s;
    opacity: 0;
    background-color: rgb(145, 145, 145,0.5);

}

.m_m1:hover .m_move_mask  ,.m_m2:hover .m_move_mask2,.m_m3:hover .m_move_mask3,.m_m4:hover .m_move_mask4,.m_m5:hover .m_move_mask5 ,.m_m6:hover .m_move_mask6{
    visibility: visible;
    transform: translateY(0px);
    opacity:1;
}

.m_move_mask span ,.m_move_mask2 span,.m_move_mask3 span,.m_move_mask4 span ,.m_move_mask5 span ,.m_move_mask6 span {
    /* display: block; */
    margin-top: 5px;
    color: white;
    text-align: left;
    font-size: 16px;
}
.m_move_mask p,.m_move_mask2 p,.m_move_mask3 p,.m_move_mask4 p,.m_move_mask5 p ,.m_move_mask56 p{
    
   
    text-align: left;

    font-size: 12px;
    color: #cfcfcf;
}
.m_rela{
    position: relative;
}
.m_bang li h3{
    z-index: 9999999;
    color: white;
    position: absolute;
    left: 110px;
    top: 20px;
    text-align: center;
}

.m_bang{
    margin: 0;
}
.m_bang li{
    margin: 0;
    padding: 0px 45px;
    /* border: 1px solid #000; */
}

.m_bang li p{
    width: 190px;
    margin-top: 20px;
    /* border: 1px solid #000; */
}
.m_bang li p img{
    /* float: left; */
    width: 40px;
    height: 40px;
}
.m_bang li p span{
    margin-top: 5px;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    display: inline-block;
    /* border: 1px solid #000; */
}
.m_bang li p h4{
    padding-left: 10px;
    margin-left: 10px;
}
/* .m_bang li a{
    margin-left: 40px;
    display: block;
    width: 80px;
    height: 40px;
    border: 1px solid #000;
} */
.m_bang li .m_nub{
    margin: 10px 15px;
    font-size: 16px;
}
.m_bang li span{
    display: block;
}
.m_bang li span:hover{
    color: rgb(110, 79, 224);

}
.m_bang li span font{
    color: #ada9a9;
}
.m_bang .m_biu {
    width: 190px;
    height: 100px;
    overflow: hidden;
    position: relative;

}
.m_bang .m_biu img{
    width: 190px;
    height: 100px;
    transform: scale(1);
    /* border: 1px solid #000; */
}
.m_biu:hover .m_biu_img{
    transition: all 0.5s;
    transform: scale(1.2);
}
.m_hd{
    margin: 0;
}
.m_hd li img{
    /* display: -webkit-box; */
    
    width: 100%;
    height: 200px;
    margin-top: 20px;

}
.m_booo{
    /* height: 550px; */
    /* border: 1px solid #000; */
}
.m_booo li{
    height: 400px;
    position: relative;
    /* border: 1px solid red; */
}
.m_booo li .m_bo_mak{
    position: absolute;
    top: 0px;
    left: 15px;
}
.m_booo li .m_si{
    transform: rotate(0deg)  translateY(0px);
    transition: all 1s;
    max-width: 165px;
    opacity: 1;
    -webkit-box-reflect:below 5px -webkit-linear-gradient(transparent,transparent 40%,rgba(0,0,0,.8)); ;
}
.m_booo li .m_si:hover{
    opacity: 0;

    transform: rotate(45deg)  translateY(100px);
}
.m_booo li:nth-of-type(2n+1){
    margin-top: 80px;
}
.m_lyric{
    /* display: none; */
    transition: all 0.5s;
    display:block;
    margin: 0 auto;
    width: 100%;
        height: 40px;
    position: fixed;
    bottom: 0;
    z-index: 9999999;
    background-color: transparent;
}
.m_lyric:hover .m_center{
    visibility: visible;
    opacity: 1;
    transition: all 0.2s;

    transform: translateY(-40px);

}
.m_center{
    visibility: hidden;
    opacity: 0;
    transform: translateY(0px);
    height: 80px;
    margin: 0;
    /* background-color: red; */
    background-color: white;

}
.m_b_slider{
    padding-top: 20px;
    padding-bottom: 20px;
    /* border: 1px solid #000; */
    /* margin-left: 80px; */

}
.m_b_slider p{
    width: 320px;
    /* border: 1px solid #000; */
}
.m_b_slider font {
    padding-left: 150px;
}
.m_center img{
    width: 70px;
    height: 70px;
    margin: 5px ;
}
.m_center .m_geci {
    height: 80px;
    width: 1170px;
    margin: 0 auto;
}
.m_meter{
    width: 320px;
    height: 5px;

}
.m_paygroup{
    height: 100%;
    /* border: 1px solid #000; */
}
.m_center .m_b_play2 {
    font-size: 26px;
    margin-left: 15px;
    margin-right: 10px;
    /* border: 1px solid #000; */

}
.m_center .m_b_play  {
    margin-top: 30px;
    margin-left: 10px;
    font-size: 16px;
    vertical-align: middle;
}
.m_geci span  {
    display: inline-block;
    margin-top: 35px;
    margin-left: 40px;
    font-size: 16px;
    color: #868686;
}
.m_geci {
    position: relative;
    /* border: 1px solid #000; */
}
.m_paygroup .m_ssx {
    margin-left: 25px;
    margin-right: 20px;

    font-size: 26px;
}
.m_gao{
    /* border: 1px solid #000; */
    border-radius: 20px;
    width: 80px;
}
.m_meter2{
    display: inline-block;
    width: 100px;
    height: 10px;
    /* border: 1px solid #000; */
    margin-left: 30px;
    /* padding-top: 35px; */
    position: absolute;
    right: 20px;
    top: 35px;
}
.m_geci1 img{
    width: 90px;
    height: 90px;
}
.
/* 缩小后的歌词 */

